<template>
  <div class="bottom-page">
    <div class="type-area">
      <div class="left">
        <p>Thank you</p>
        <p>for browsing</p>
        <p>Vue 69.0%</p>
        <p>HTML 14.5%</p>
        <p>CSS 13.6%</p>
        <p>JavaScript 2.9%</p>
        <p>代码统计来源：https://gitee.com</p>
        <p>
          本站开源地址：
          <a
            href="https://gitee.com/zhao-hehui/zhaohehui"
            target="_blank"
          >https://gitee.com/zhao-hehui/zhaohehui</a>
        </p>
      </div>
      <div class="right">
        <div class="title">向我发邮件</div>
        <div class="form">
          <a-input v-model="form.fullName" class="a-input" placeholder="Full name" />
          <a-input v-model="form.email" class="a-input" placeholder="Email" />
          <a-input v-model="form.subject" class="a-input" placeholder="Subject" />
          <a-textarea
            v-model="form.message"
            class="a-input"
            placeholder="Message"
            :auto-size="{ minRows: 6, maxRows: 5 }"
          />
          <a-button @click="submit" class="button" type="primary">发送邮件</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: 'BottomPage',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {
      form: {
        fullName: undefined,
        email: undefined,
        subject: undefined,
        message: undefined
      }
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，el属性还不存在
  */
  created () { },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () { },
  // 组件方法
  methods: {
    submit () {
      this.$message.info('该功能暂未开放，敬请期待！')
      // this.$message.
      // // eslint-disable-next-line no-undef
      // Email.send({
      //   Host: "smtp.qq.com", // 邮箱地址
      //   Username: this.form.email,
      //   Password: "dfthswcmixiecbbh",// 授权码
      //   To: '508460199@qq.com',// 接受邮件的地址
      //   From: this.form.email,// 发送邮箱的地址
      //   Subject: this.form.subject,// 邮件主题
      //   Body: this.form.fullName + "-" + this.form.message // 邮件内容
      // }).then(
      //   message => console.log(message)
      // )
    }
  }
}
</script>

<style scoped lang="less">
.bottom-page {
  width: 1920;
  height: 1080rem;
  background-color: #01010d;
  .type-area {
    margin: auto;
    padding-top: 220rem;
    width: 1240rem;
    height: 1080rem;
    .left {
      float: left;
      p {
        margin: 0;
        margin-bottom: 10rem;
        font-size: 14rem;
        color: #fff;
      }
      p:nth-child(1) {
        margin-bottom: 0;
        font-size: 68rem;
        font-weight: 700;
        color: #fff;
      }
      p:nth-child(2) {
        margin-bottom: 36rem;
        font-size: 30rem;
        font-weight: 700;
        color: #fff;
      }
      p:nth-child(6) {
        margin-bottom: 36rem;
      }
      p:nth-child(8) {
        a {
          color: #fff;
        }
        a:hover {
          color: #6d6fda;
        }
      }
    }
    .right {
      width: 660rem;
      float: right;
      .title {
        margin-bottom: 26rem;
        font-size: 26rem;
        color: #fff;
        text-align: center;
      }
      .a-input {
        margin-bottom: 28rem;
        padding: 0 30rem;
        height: 50rem;
        border-radius: 25rem;
        border: 1rem solid #316ce2;
        background-color: #01010d;
        color: #fff;
        &:nth-child(4) {
          padding: 15rem 30rem;
        }
      }
      .button {
        height: 40rem;
        width: 120rem;
        font-size: 16rem;
        border-radius: 25rem;
        border: 0;
        background-color: #316ce2;
      }
    }
  }
}
</style>
